/*
 * @Author: liangliang
 * @Date: 2023-05-22 18:47:50
 * @LastEditors: yusha
 * @LastEditTime: 2023-08-25 10:07:39
 * @Description: 新增/修改供应商信息
 */
import React from 'react';
import { Form, Input, InputNumber, Select } from 'antd';
import { useMount } from 'ahooks';
import { FormModalContentProps } from '@/hooks/useFormModal';
import { OemSupplier } from '@/service/order';
import './index.scss';

/** 结算方式 */
enum Settle_Type {
    /** 采购单 */
    Purchase_Order = 1,
    /** 账期 */
    Payment_Period = 2
}
/** 账期结算方式 */
enum Stage_Settle_Type{
    WEEK = 2,
    DAY = 1
}
interface EditSupplierInfoFormProps extends FormModalContentProps{
  rowItem?: OemSupplier;
}
const EditSupplierInfo = (props: EditSupplierInfoFormProps) => {
    const { formModal, rowItem } = props;
    const { modal, form } = formModal;
    /** 监听供应商类型，如果为成品的结算账期信息必填 */
    const _supplierType = Form.useWatch('supplierType', form);
    /** 监听结算方式 */
    const _settleType = Form.useWatch('settleType', form);

    /** 监听账期结算方式 */
    const _stageSettleType = Form.useWatch('stageSettleType', form);

    useMount(() => {
        form.setFieldsValue({
            ...rowItem,
            stageSettleType: rowItem?.stageSettleType ? rowItem?.stageSettleType : undefined
        });
    });
    return(
        <>
            <Form
                name="editSupplierInfo"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                form={form}
            >
                <div >
                    <h2 className="base-info-style">基础信息</h2>
                    <Form.Item label="供应商名称" name="supplierName" rules={[{ required: true, message: '请输入' }]}>
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item label="供应商类型" name="supplierType" rules={[{ required: true, message: '请选择' }]}>
                        <Select
                            placeholder="请选择"
                            options={[
                                { value: 1, label: 'OEM供应商' },
                                { value: 2, label: '成品供应商' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item label="主营类目" name="mainCategory" rules={[{ required: true, message: '请输入' }]}>
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item label="是否支持定制" name="supportCustomizationFlag" rules={[{ required: true, message: '请选择' }]}>
                        <Select
                            placeholder="请选择"
                            options={[
                                { value: 1, label: '是' },
                                { value: 2, label: '否' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item label="联系人姓名" name="contactPerson" rules={[{ required: true, message: '请输入' }]}>
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item label="手机号" name="tel" rules={[{ required: true, message: '请输入' }]}>
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item label="地址" name="supplierAddress" rules={[{ required: true, message: '请输入' }]}>
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item label="1688链接" name="alibabaUrl">
                        <Input placeholder="请输入" />
                    </Form.Item>
                </div>
                <div>
                    <h2 className="settlement-info-style">结算账期信息</h2>
                    <Form.Item label="结算方式" name="settleType" rules={_supplierType === 2 ? [{ required: true, message: '请选择' }] : undefined}>
                        <Select
                            placeholder="请选择"
                            options={[
                                { value: Settle_Type.Purchase_Order, label: '按采购单现结' },
                                { value: Settle_Type.Payment_Period, label: '按账期结算' },
                            ]}
                        />
                    </Form.Item>
                    {
                        _settleType === Settle_Type.Payment_Period &&
                        <>
                            <Form.Item label="账期结算方式" required={_supplierType === 2 } className="account-settlement-method">
                                <Form.Item label="" name="stageSettleType" style={{ width: 150 }} rules={_supplierType === 2 ? [{ required: true, message: '请选择' }] : undefined}>
                                    <Select
                                        placeholder="请选择"
                                        options={[
                                            { value: Stage_Settle_Type.WEEK, label: '按周结算' },
                                            { value: Stage_Settle_Type.DAY, label: '固定日月结' },
                                        ]}
                                        onChange={() => {
                                            form.setFieldsValue({ settleTime: undefined });
                                        }}
                                    />
                                </Form.Item>

                                {_stageSettleType === Stage_Settle_Type.WEEK && <div className="ml-[16px] mr-[16px]">每周</div>}
                                {
                                    Boolean(_stageSettleType) &&
                                    <Form.Item label="" name="settleTime" rules={_supplierType === 2 ? [{ required: true, message: _stageSettleType === Stage_Settle_Type.WEEK ? '请选择' : '请输入' }] : undefined}>
                                        {
                                            _stageSettleType === Stage_Settle_Type.WEEK &&
                                        <Select
                                            placeholder="请选择"
                                            options={[
                                                { value: '1', label: '一' },
                                                { value: '2', label: '二' },
                                                { value: '3', label: '三' },
                                                { value: '4', label: '四' },
                                                { value: '5', label: '五' },
                                                { value: '6', label: '六' },
                                                { value: '7', label: '日' },
                                            ]}
                                        />}
                                        {
                                            _stageSettleType === Stage_Settle_Type.DAY &&
                                        <InputNumber placeholder="1-28" min={1} max={28} precision={0} className="ml-[16px]"/>
                                        }
                                    </Form.Item>
                                }
                                {_stageSettleType === Stage_Settle_Type.DAY && <div className="ml-[16px]">日</div>}
                            </Form.Item>
                        </>
                    }
                </div>
            </Form>
        </>
    );
};

export default EditSupplierInfo;
